<template>
	<view class="cate">
		<view class="header">
			<image src="../../../static/icons/arrl.png" mode=""@tap="back"></image>
			<text>乐居</text>
		</view>
		<view class="nav">
			<view @tap="cateNum(1)" class="nav-item" :class="num == 1 ? 'active' : ''">新品</view>
			<view @tap="cateNum(2)" class="nav-item" :class="num == 2 ? 'active' : ''">销量</view>
			<view @tap="cateNum(3)" class="topthree">
				<view class="nav-item" :class="num == 3 ? 'active' : ''">价格</view>
				<view class="arr">
					<text class="iconfont icon-arrt" :class="str == 'up' ? 'act' : ''"></text>
					<text class="iconfont icon-arrb" :class="str == 'down' ? 'act' : ''"></text>
				</view>
			</view>
			<view @tap="cateNum(4)" class="nav-item" :class="num == 4 ? 'active' : ''">筛选</view>
		</view>
		<view class="goods">
			<view class="item" v-for="ele in list" :key="ele.id" @tap="jumpGoodsDetail(ele.id)">
				<image :src="ele.pic" mode=""></image>
				<view class="info">
					<view>{{ele.name}}</view>
					<view>
						<text>¥{{ele.price}}元</text>
						<text>不凡</text>
					</view>
				</view>
			</view>
		</view>
		<view v-if="isShow" class="shang">上拉显示更多</view>
		<view v-else class="xia">没有更多数据了</view>
	</view>
</template>

<script>
	import {
		findProductList
	} from "../../../api/home/cate.js"
	export default {
		data() {
			return {
				num:1,
				cateId:"",
				list:[],
				isShow:true,
				str:""
			};
		},
		methods:{
			jumpGoodsDetail(id) {
				uni.navigateTo({
					url:`../goodsDetail/goodsDetail?id=${id}`
				})
			},
			cateNum(n) {
				this.num = n
				if (n == 3) {
					if (this.str == "") {
						this.str = "up"
						this.init(0,"price")
					} else if (this.str == "up") {
						this.str = "down"
						this.init(1,"price")
					} else if (this.str == "down") {
						this.str = "up"
						this.init(0,"price")
					}
				} else {
					this.str = ""
				}
			},
			back() {
				uni.switchTab({
					url:"/pages/home/home"
				})
			},
			init(desc=0,by="") {
				var _this = this
				findProductList({
					categoryId:_this.cateId,
					isDesc :desc,
					sortBy :by
				}).then(res=>{
					_this.list = res.data.rows
					if (_this.list.length == 0) {
						_this.isShow = false
						console.log("我是0")
					}
					console.log(_this.list)
					uni.stopPullDownRefresh()
				})
			}
		},
		onLoad(options) {
			this.cateId = options.id
			this.init()
		},
		onPullDownRefresh() {
			this.init()
		}
	}
</script>

<style lang="scss">
page {
	background-color: #f1ece7;
	color: #3E3E3E;
}
.header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #354e44;
	height: 60rpx;
	padding: 14rpx 6rpx;
	image {
		position: absolute;
		left: 4rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 40rpx;
		height: 40rpx;
	}
	text {
		font-size: 32rpx;
		color: #FFFFFF;
		font-weight: bolder;
	}
}
.nav {
	display: flex;
	justify-content: space-around;
	padding-top: 14rpx;
	font-size: 30rpx;
	color: #FFFFFF;
	background-color: #354e44;
	.nav-item {
		height: 62rpx;
		&.active {
			color: #DD524D;
		}
	}
	.topthree {
		position: relative;
		.arr {
			display: flex;
			flex-direction: column;
			position: absolute;
			right: -28rpx;
			top: 0;
			text {
				font-size: 8rpx;
				line-height: 1;
				width: 24rpx;
				height: 16rpx;
				&.act {
					color: #DD524D;
				}
			}
		}
	}
	
}
.goods {
	padding-top: 40rpx;
	display: flex;
	flex-wrap: wrap;
	.item {
		width: 316rpx;
		background-color: #fff;
		border-radius: 8rpx;
		margin: 0 0 40rpx 40rpx;
		font-size: 26rpx;
		image {
			width: 100%;
			height: 238rpx;
		}
		.info {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 36rpx;
			width: 244rpx;
			height: 98rpx;
			view {
				&:first-child {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-weight: bolder;
				}
				&:last-child {
					display: flex;
					justify-content: space-between;
					color: #000;
				}
			}
		}
	}
}
.shang,
.xia {
	height: 80rpx;
	text-align: center;
	line-height: 80rpx;
	font-size: 30rpx;
	color: #777;
}
</style>
